<template lang="html">
    <div class="container_return">
        <mt-header fixed title="申请补卡">
            <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
        </mt-header>
        <section class="want-sign">
            <h2>补卡班次</h2>
            <span>{{yearMonth}}\{{week}}</span>
        </section>
        <section class="want-sign card-reason">
            <h2><i>*</i>缺卡原因</h2>
            <textarea placeholder="请输入" v-model="reason" maxlength="50"></textarea>
        </section>
        <section class="sign-button">
            <button @click="signSubmit">提 交</button>
        </section>
    </div>
</template>
<script>
    import app from '~/assets/api/config'

    export default {
        data() {
            return {
                yearMonth: '',
                week: '',
                reason: ''
            }
        },
        created() {

        },
        mounted() {
            this.gettimes();
        },
        methods: {
            Returnclick() {//返回
                this.$router.go(-1);
            },
            gettimes() { //获取时间
                this.$axios.post(app.API_BES_URL + '/api/backend/v1/checkin/getTimeList').then((res) => {
                    if (res.data.code == 0) {
                        this.week = res.data.data.week;
                        this.yearMonth = res.data.data.yearMonth && res.data.data.yearMonth.replace(/[^\d\.]/g, '-')
                        this.yearMonth = this.yearMonth.substring(0, this.yearMonth.length - 1)
                    }
                });
            },
            signSubmit() {
                this.$axios.post(app.API_BES_URL + '/api/backend/v1/checkin/recheckin', {
                    longitude: this.$route.query.longitude,
                    latitude: this.$route.query.latitude,
                    date: this.yearMonth,
                    reason: this.reason
                }).then((res) => {
                    if (res.data.code == 0) {
                        this.$router.go(-1);
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">

    .container_return {
        .want-sign {
            background: #fff;
            padding: 57px 12.5px 40px 37px;
            margin-bottom: 23.75px;
            h2 {
                font-size: 34px;
                font-weight: 500;
                color: #2e2e2e;
            }
            span {
                display: block;
                font-size: 34px;
                color: #a3a5a9;
                padding-top: 25px;
            }
        }
        .card-reason {
            padding: 38px 17.5px;
            margin-bottom: 75px;
            h2 {
                display: flex;
                align-items: center;
                i {
                    display: inline-block;
                    margin-right: 7.5px;
                    font-style: normal;
                    color: #ff684f;
                    font-size: 34px;
                }
            }
            textarea {
                display: block;
                margin-top: 25px;
                border: 0;
                width: 100%;
                box-sizing: border-box;
                padding: 17.5px;
                min-height: 325px;
                resize: none;
                outline: none;
            }
        }
        .sign-button {
            width: 90%;
            margin: 0 auto;
            button {
                display: block;
                width: 100%;
                color: #333;
                font-size: 32px;
                border: 0;
                outline: none;
                border-radius: 62.5px;
                height: 76px;
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00',endColorStr='#ffcd00',gradientType='1');
                background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
                background: -o-linear-gradient(left, #ffdf00, #ffcd00);
                background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#ffdf00), to(#ffcd00));
            }
            button:active {
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111',endColorStr='#E6C022',gradientType='1');
                background: -moz-linear-gradient(left, #ecc111, #e6c022);
                background: -o-linear-gradient(left, #ecc111, #e6c022);
                background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#ecc111), to(#e6c022));
            }
        }
    }


</style>
<style>
html,body{
    background: #f8f8f9;
}
.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
    line-height:1;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
.mint-header-button.is-right {
    margin-right: 0.3rem;
}
.container_return .want-sign{
    margin-top:90px;
}
.container_return .card-reason{
    margin-top:0!important;
}
</style>

